<template>
  <div>
    <div class="test">{{ $t('Message.Menu.Home') }}</div>
    <el-button type="primary" @click="inputCode">test</el-button>
    <password-input
      ref="passInput"
      @comfirm-pass="onComfirmPass"
      :input-len="codeLen"
      :title="codeTitle"
    ></password-input>

    <el-button type="primary" @click="add">count:{{ num }}</el-button>
    <el-button type="primary" @click="addAge">新增年龄</el-button>
    <el-tag>{{ person.age }}</el-tag>
  </div>
</template>

<script setup>
import passwordInput from '../../components/passwordInput.vue'
const codeLen = ref(6)
const codeTitle = ref('支付密码')
const num = ref(0)
const age = ref(18)

const doubleCount = computed(() => {
  return num.value * 2
})
console.log(doubleCount.value)

const person = reactive({
  name: 'xiaopanghu',
  age: 18,
  gender: '1',
})

watch(
  () => person.age,
  (newVal, oldVal) => {
    console.log('newVal', newVal)
    console.log('oldVal', oldVal)
  },
  { immediate: true, deep: true }
)

const add = () => {
  num.value += 1
  console.log(doubleCount.value)
}

const addAge = () => {
  person.age += 1
}

watch([num, age], (newVal, oldVal) => {
  console.log('newVal', newVal)
  console.log('oldVal', oldVal)
})

// 子组件ref
const passInput = ref(null)

const inputCode = () => {
  // 调用子组件方法
  passInput.value.init()
}

const onComfirmPass = (code) => {
  console.log(code)
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/login/login';
</style>
